<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>

<head>
    <title>货运查询</title>

    <link href="${ctx}/statics/bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link href="${ctx}/statics/styles/navbar.css" rel="stylesheet"/>
    <!--tags input-->
    <link href="${ctx}/statics/bootstrap/plugin/datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet"
          href="${ctx}/statics/bootstrap/plugin/bootstrap-select-1.11.2/dist/css/bootstrap-select.min.css">
    <link rel="stylesheet" href="${ctx}/statics/styles/index.css"/>
    <link rel="stylesheet" href="${ctx}/statics/styles/typeaheadjs.css"/>

    <style>
        @media screen and (min-width: 769px) {
            .logo-margin {
               margin-top:60px;
                margin-bottom: 20px;;
            }
        }
        @media screen and (max-width: 768px) {
            .logo-margin {
                margin-top:20px;
                margin-bottom: 20px;
            }
        }


    </style>
</head>





<div class="col-sm-offset-2 col-sm-8">
    <div class="row"><div class="col-sm-offset-4 col-sm-4 logo-margin"><img id="" width="auto"
                                                                height="50px"
                                                                src="${ctx}/statics/images/logo-1.png"
                                                                alt="logo"></div></div>
    <div class="row">

        <div class="container-fluid">
            <ul class="nav nav-tabs" role="tablist" id="myTab">
                <li role="presentation" class="active"><a href="#inputPhoneNoSearch" role="tab"
                                                          data-toggle="tab">手机号码查询</a></li>
                <li role="presentation"><a href="#inputOrderNoSearch" role="tab" data-toggle="tab">物流单号查询</a></li>
            </ul>


            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="inputPhoneNoSearch">
                    <br>

                    <form id="idPhoneSearchForm" class="form-inline" role="form">
                        <div class="form-group">
                            <label class="control-label">手机号码:</label>
                            <input id="input-search1-phoneNo" name="phoneNo" type="search"
                                   class="form-control">
                        </div>
                        <div class="form-group">
                            <label class="control-label">开始时间:</label>
                                <input id="idPhoneSearchStartDate" name="startDate" type="text" class="form-control" readonly/>

                        </div>
                        <div class="form-group">
                            <label class="control-label">结束时间:</label>
                            <input id="idPhoneSearchEndDate" name="endDate" type="text" class="form-control" readonly/>
                        </div>

                        <button type="submit" class="btn btn-warning"><span
                                class="glyphicon glyphicon-search"></span>查询
                        </button>
                    </form>

                    <div class="panel panel-default" id="idWayblillTraceByPhonePanel"
                         style="display: none;border-width: 0px;">
                        <div class="panel-body">

                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="inputOrderNoSearch"><br>
                    <form id="idWaybillNoSearchForm" class="form-inline" role="form">
                        <div class="form-group">
                            <label class="control-label">物流公司：</label>
                                <input type="hidden" name="companyId"/>
                                <input class="form-control" name="companyName" type="text" id="idInputCompany"/>

                        </div>
                        <div class="form-group">
                            <label class="control-label">运单号：</label>
                            <input type="search" class="form-control" name="waybillNo">


                        </div>
                        <button type="submit"  class="btn btn-warning">&nbsp;&nbsp;&nbsp;&nbsp;<span
                                class="glyphicon glyphicon-search"></span>查询&nbsp;&nbsp;&nbsp;&nbsp;</button>

                    </form>
                    <div class="panel panel-default" id="idWayblillTraceByWaybillNoPanel"
                         style="display: none;border-width: 0px;">
                        <div class="panel-body">

                        </div>
                    </div>
                    <br>
                    <br>

                    <div id="idCompanyList">

                    </div>
                </div>
            </div>
        </div>

    </div>


</div>
<br/>

<br>
<br>
<br>
<br>
<div class="container-fluid col-sm-offset-2 col-sm-8">

    <div class="page-header">
        <h4>常用快递查询</h4>
    </div>


    <div class="form-inline">
        <div class="input-group">
            <input type="hidden" name="com" id="input-exp-simple-name" value="shunfeng">
            <span class="input-group-addon" style="padding: 0px;line-height: 30px"><img id="img-exp-image" width="90px"
                                                                                        height="33px"
                                                                                        src="http://app2.showapi.com/img/expImg/shunfeng.jpg"
                                                                                        alt="顺丰速运"></span>
            <input id="input-saarch-exp-nu" class="form-control" type="text" placeholder="请输入物流单号">
        </div>
        <button id="idSearchExp" type="button" class="btn btn-warning">&nbsp;&nbsp;&nbsp;&nbsp;<span
                class="glyphicon glyphicon-search"></span>查询&nbsp;&nbsp;&nbsp;&nbsp;</button>
    </div>
    <div class="panel panel-default" id="idExpTracePanel" style="display: none;">
        <div class="panel-body">
            <table class="table " id="idExpTraceTable">
                <thead>
                <tr>
                    <th>时间</th>
                    <th></th>
                    <th>地点和跟踪进度</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
        <div class="panel-footer"></div>
    </div>
    <br>

    <div class="row">
        <div class="col-xs-6 col-md-2">
            <a href="#" class="thumbnail express-link" data-my-exp-simpleName="shunfeng"
               data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/shunfeng.jpg"> <img
                    src="http://app2.showapi.com/img/expImg/shunfeng.jpg" alt="..."></a>
        </div>
        <div class="col-xs-6 col-md-2">
            <a href="#" class="thumbnail express-link" data-my-exp-simpleName="shentong"
               data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/shentong.jpg"> <img
                    src="http://app2.showapi.com/img/expImg/shentong.jpg" alt="..."></a>
        </div>
        <div class="col-xs-6 col-md-2">
            <a href="#" class="thumbnail express-link" data-my-exp-simpleName="yuantong"
               data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/yuantong.jpg"><img
                    src="http://app2.showapi.com/img/expImg/yuantong.jpg" alt="..."></a>
        </div>
        <div class="col-xs-6 col-md-2">
            <a href="#" class="thumbnail express-link" data-my-exp-simpleName="yunda"
               data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/yunda.jpg"> <img
                    src="http://app2.showapi.com/img/expImg/yunda.jpg"
                    alt="..."></a>
        </div>
        <div class="col-xs-6 col-md-2">
            <a href="#" class="thumbnail express-link" data-my-exp-simpleName="zhongtong"
               data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/zto.jpg"> <img
                    src="http://app2.showapi.com/img/expImg/zto.jpg"
                    alt="..."></a>
        </div>
        <div class="col-xs-6 col-md-2">
            <a href="#" class="thumbnail  express-link" data-my-exp-simpleName="huitong"
               data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/ht.jpg"> <img
                    src="http://app2.showapi.com/img/expImg/ht.jpg" alt="..."></a></div>
        <div class="col-xs-6 col-md-2"><a href="#" class="thumbnail express-link" data-my-exp-simpleName="debang"
                                          data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/dbwl_logo.gif"> <img
                src="http://app2.showapi.com/img/expImg/dbwl_logo.gif" alt="..."></a>
        </div>
        <div class="col-xs-6 col-md-2"><a href="#" class="thumbnail express-link" data-my-exp-simpleName="zhaijisong"
                                          data-my-exp-imgUrl="http://app2.showapi.com/img/expImg/zjs_logo.gif"> <img
                src="http://app2.showapi.com/img/expImg/zjs_logo.gif" alt="..."></a></div>

    </div>

    <div class="row">
        <a href="/express" class="hyperlink">更多快递公司>></a>
    </div>

</div>


<script src="${ctx}/statics/js/jquery-3.1.1.min.js"></script>
<script src="${ctx}/statics/bootstrap/js/bootstrap.min.js"></script>

<script src="${ctx}/statics/bootstrap/plugin/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="${ctx}/statics/bootstrap/plugin/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<!--<script src="statics/bootstrap/plugin/validator/dist/js/bootstrapValidator.min.js"></script>-->
<!--<script src="statics/bootstrap/plugin/validator/dist/js/language/zh_CN.js"></script>-->
<%--<script src="${ctx}/statics/commonjs/bloodhound.min.js"></script>--%>
<script src="${ctx}/statics/commonjs/typeahead.bundle.min.js"></script>
<script src="${ctx}/statics/js/index.js"></script>
<script type="application/javascript">
    $(function () {
        //日期选择器
        $("#idPhoneSearchStartDate").datetimepicker({
            format: 'yyyy-mm-dd hh:ii',
            language: 'zh-CN',
            autoclose:true

        });

        //日期选择器
        $("#idPhoneSearchEndDate").datetimepicker({
            format: 'yyyy-mm-dd hh:ii',
            language: 'zh-CN',
            autoclose:true

        });
        //-----------公司选择
        var companies = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('companyName'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
//            prefetch: 'http://localhost:8080/common/company/list'
           // remote: '${ctx}/common/company/list'
            prefetch: '${ctx}/common/company/list'

        });
        companies.initialize();
        //companies.initialize();
        $('#idInputCompany').typeahead('#idInputCompany').typeahead(null, {
            name: 'companies',
            displayKey : 'companyName',
            source: companies.ttAdapter()
        });

        $('#idInputCompany').bind('typeahead:select', function(ev, item) {

            $("#idWaybillNoSearchForm input[name='companyId']").val(item.companyId);

        });
        //响应enter事件
        $('#idInputCompany').keypress(function(e){
            //enter key
           if(e.keyCode==13){
               e.preventDefault();
               //如果有提示，enter选择第一个
               console.log($("#idInputCompany ~ .tt-menu .tt-dataset .tt-suggestion").first().html());
               $("#idInputCompany ~ .tt-menu .tt-dataset .tt-suggestion").first().trigger("click");
               $('#idInputCompany').typeahead("close");
           }

        });



        //货运公司列表
        //idCompanyList
        $.get('${ctx}/company/list', function (data) {
            $("#idCompanyList").empty();
            $("#idCompanyList").html(data);
            $("#idCompanyList").find("a[class='company-link']").click(function(e){
                var companyId=$(this).data('my-company-id');
                var companyName=$(this).data('my-company-name');
                $("#idWaybillNoSearchForm input[name='companyId']").val(companyId);
                $("#idWaybillNoSearchForm input[name='companyName']").val(companyName);
            });
        }, 'html');

        //---------------------------------------------------------------------------------
        //托运物流查询
        $("#idPhoneSearchForm").submit(function (e) {
            e.preventDefault();
            var params = {};
            $(this).find("input").each(function (index, item) {
                var val = $(item).val();
                var name = $(item).attr("name");
                if (val != null && val != "" && val != undefined) {
                    params[name] = val;
                }
            });
            //获取手机号
            var phoneNo = $("#input-search1-phoneNo").val();
            $("#idWayblillTraceByPhonePanel").hide();
            $.ajax({
                url: '${ctx}/search/1',
                type: 'get',
                contentTypeString: 'application/x-www-form-urlencoded',
                dataType: 'html',
                data: params,
                success: function (result, textStatus, jqXHR) {
                    console.log(result);
                    $("#idWayblillTraceByPhonePanel .panel-body").empty();
                    $("#idWayblillTraceByPhonePanel .panel-body").html(result);
                    $("#idWayblillTraceByPhonePanel").show();
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    // 通常 textStatus 和 errorThrown 之中
                    // 只有一个会包含信息
                    console.log(XMLHttpRequest.responseText);
                    console.log(textStatus)
                    this; // 调用本次AJAX请求时传递的options参数
                    var htmlStr = "<span>未知错误</span>";
                    $("#idWayblillTraceByPhonePanel .panel-body").empty();
                    $("#idWayblillTraceByPhonePanel .panel-body").append(htmlStr);
                    $("#idWayblillTraceByPhonePanel").show();
                }
            });
        });




        //------------------------------------------------------------------------------------------------------------
        $("#idWaybillNoSearchForm").submit(function(e){
            e.preventDefault();
            var params = {};
            $(this).find("input[name]").each(function(index,item){
                var name= $(item).attr("name");
                var val = $(item).val();
                if(val!=null && val != '' & val!==undefined){
                    params[name]=val;
                }
            });

            $.get('${ctx}/search/2',params,function(result){
                $("#idWayblillTraceByWaybillNoPanel").hide();
                $("#idWayblillTraceByWaybillNoPanel .panel-body").empty();
                $("#idWayblillTraceByWaybillNoPanel .panel-body").html(result);
                $("#idWayblillTraceByWaybillNoPanel").show();
            },'html');
        });


        //快递查询 -----------------------------------------------------------
        $(".express-link").click(function () {
            //获取simpleName和imageUrl
            console.log($(this));
            var simpleName = $(this).attr("data-my-exp-simpleName");
            var imgUrl = $(this).attr("data-my-exp-imgUrl");
            $("#input-exp-simple-name").val(simpleName);
            $("#img-exp-image").attr("src", imgUrl);
            $("#img-exp-image").attr("alt", $(this).html());


        });


    });


    $("#idSearchExp").click(function () {
        var comName = $("#input-exp-simple-name").val();
        var waybillNo = $("#input-saarch-exp-nu").val();
        $("#idExpTracePanel").hide();
        $("#idExpTraceTable tbody").empty();
        $.ajax({
            url: '${ctx}/express/info',
            type: 'get',
            contentTypeString: 'application/x-www-form-urlencoded',
            dataType: 'json',
            data: {com: comName, nu: waybillNo},
            success: function (data, textStatus, jqXHR) {

                if (data.status == 0) {
                    //"status":-1 待查询 0 查询异常 1 暂无记录 2 在途中 3 派送中 4 已签收 5 用户拒签 6 疑难件 7 无效单
                    var expRlt = data.data;

                    var statusMsg = "";
                    switch (expRlt.status) {
                        case -1:
                            statusMsg = "待查询";
                            break;
                        case 0:
                            statusMsg = "查询异常";
                            break;
                        case 1:
                            statusMsg = "暂无记录";
                            break;
                        case 2:
                            statusMsg = "在途中";
                            break;
                        case 3:
                            statusMsg = "派送中";
                            break;
                        case 4:
                            statusMsg = "已签收";
                            break;
                        case 5:
                            statusMsg = "用户拒签";
                            break;
                        case 6:
                            statusMsg = "疑难件";
                            break;
                        case 7 :
                            statusMsg = "无效单";
                            break;
                    }

                    //显示

                    var htmlStr = "";
                    if (expRlt.status >= 2) {
                        $.each(expRlt.data, function (index, item) {

                            htmlStr += "<tr>" +
                                    "<td> <small>" + item.time.substring(0, 10) + "</small><br><span>" + item.time.substring(11, 16) + "</span></td>" +
                                    "<td><span class='glyphicon glyphicon-record'></span></td> " +
                                    "<td>" + item.context + "</td> </tr>";

                        });
                    } else {

                        htmlStr = "<tr>" +
                                "<td> <small></small><br><span></span></td>" +
                                "<td><span class='glyphicon glyphicon-record'></span></td> " +
                                "<td>" + statusMsg + "</td> </tr>";

                    }


                    $("#idExpTraceTable tbody").empty();
                    $("#idExpTraceTable tbody").append(htmlStr);
                    $("#idExpTracePanel").show();


                } else {

                    var htmlStr = "<tr>" +
                            "<td> <small></small><br><span></span></td>" +
                            "<td><span class='glyphicon glyphicon-record'></span></td> " +
                            "<td>未知错误</td> </tr>";

                    $("#idExpTraceTable tbody").empty();
                    $("#idExpTraceTable tbody").append(htmlStr);
                    $("#idExpTracePanel").show();
                }


            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // 通常 textStatus 和 errorThrown 之中
                // 只有一个会包含信息
                console.log(XMLHttpRequest);
                console.log(textStatus)
                this; // 调用本次AJAX请求时传递的options参数
            }
        });


    });

</script>

</body>

</html>